import React, { useState } from 'react';
import { Button, Space } from 'antd';
import { CloudUploadOutlined, CloudDownloadOutlined } from '@ant-design/icons';
import I18nList from '@/components/I18nList';
import { invoke, dialog } from '@tauri-apps/api';
import { Languages } from '@/interface';
import { Node } from '@/utils';

export default function IndexPage() {
  const [list, setList] = useState<Array<Partial<Languages>>>([]);
  const import_language = () => {
    dialog
      .open({
        filters: [
          {
            name: '*',
            extensions: ['json'],
          },
        ],
      })
      .then((res) => invoke<string>('plugin:i18n|file_read', { path: res }))
      .then((res) => {
        const row = JSON.parse(res);
        parse_language(row);
      });
  };
  const parse_language = (languages: Languages) => {
    let languageKey = Object.keys(languages);
    let values = Object.values(languages);
    let firstLanguage = values[0];
    const list = Object.keys(firstLanguage).map(
      (key) => new Node(key, firstLanguage[key], languages),
    );
    console.log(list, 'list');
    setList(list);
  };
  return (
    <div className={'padding-20'}>
      <Space>
        <Button onClick={import_language}>
          <CloudUploadOutlined />
          导入
        </Button>
        <Button>
          <CloudDownloadOutlined />
          导出
        </Button>
      </Space>
      <I18nList />
    </div>
  );
}
